<!--  -->
<template>
  <div class="clock-container">
    <div class="continue-box">服务器已正常运行{{ continueTime }}</div>
    <div class="clock-box">
      现在是{{ formatTime(hours) }}时{{ formatTime(min) }}分{{
        formatTime(sec)
      }}秒
    </div>
  </div>
</template>

<script>
export default {
  name: "ClockBox",
  components: {},
  data() {
    return {
      startTime: null,
      continueTime: 0,
      hours: "--",
      min: "--",
      sec: "--"
    };
  },
  computed: {},
  watch: {},
  methods: {
    formatDuring(mss) {
      var days = parseInt(mss / (1000 * 60 * 60 * 24));
      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = ((mss % (1000 * 60)) / 1000).toFixed(0);
      return (
        days +
        " 天 " +
        this.formatTime(hours) +
        " 小时 " +
        this.formatTime(minutes) +
        " 分钟 " +
        this.formatTime(seconds) +
        " 秒 "
      );
    },
    formatTime(v) {
      if (typeof v === "String") return;
      return v >= 0 && v <= 9 ? "0" + v : "" + v;
    },
    setClock() {
      setInterval(() => {
        let nowTime = new Date();
        this.hours = nowTime.getHours();
        this.min = nowTime.getMinutes();
        this.sec = nowTime.getSeconds();
        this.continueTime = this.formatDuring(
          nowTime.getTime() - this.startTime.getTime()
        );
      }, 1000);
    }
  },
  created() {},
  mounted() {
    this.setClock();
    this.startTime = new Date();
  }
};
</script>
<style lang="scss" scoped>
.clock-container {
  // width: 400px;
  height: 50px;
  line-height: 50px;
  // background-color: #cfa;
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translate(-50%);
  text-align: center;
  .continue-box {
    font-size: 30px;
    font-weight: bold;
  }
  .clock-box {
    font-size: 25px;
  }
}
</style>
